<template>
  <div class="search-header">
    <div class="search">
      <div class="item">
        <span>系统名称：</span>
        <el-select
          v-model="searchCondition.systemId"
          placeholder="请选择系统名称"
        >
          <el-option value='' label="全部"></el-option>
          <el-option
            v-for="(item,index) in systemList"
            :key="index"
            :label="item.name"
            :value="item.id + ''"
            ></el-option>
        </el-select>
      </div>
      <div class="item">
        <span>服务名称：</span>
        <el-select
          v-model="searchCondition.serviceId"
          placeholder="请选择服务名称："
        >
          <el-option value='' label="全部"></el-option>
          <el-option
            v-for="(item,index) in serverList"
            :key="index"
            :label="item.name"
            :value="item.id + ''"
            ></el-option>
        </el-select>
      </div>

      <div class="item">
        <span>报警手机号：</span>
        <el-select v-model="searchCondition.alarmCellPhone" placeholder="请选择手机号：">
          <el-option value="" label="全部"></el-option>
          <el-option
          v-for="(item,index) in phoneList"
          :key="index"
          :label="item.cellPhone"
          :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="item">
        <span>是否启用：</span>
        <el-select v-model="searchCondition.alarmCellPhone" placeholder="请选择手机号：">
          <el-option value="" label="全部"></el-option>
          <el-option
          v-for="(item,index) in phoneList"
          :key="index"
          :label="item.cellPhone"
          :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="btn-area">
        <el-button type="primary" @click="handle('search')">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
      <div class="item">
        <span>创建时间：</span>
        <el-date-picker
          v-model="searchCondition.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>

      <!-- <div class="btn-area">
        <el-button type="primary" @click="handle('search')">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div> -->
    </div>

    <el-button
      type="success"
      icon="el-icon-plus"
      class="add-btn"
      @click="handle('add')"
      >添加</el-button
    >
  </div>
</template>

<script>
import {systemFind,serviceData,} from '@/api/log';
import {queryAlarmCellPhoneList} from '@/api/serverMonitor'
import { changeParam } from "@/utils/helper";
export default {
  components: {},
  data() {
    return {
      searchCondition: {
        alarmCellPhone:'',
        systemId: "",
        serviceId: "",
        startTime:'',
        endTime:'',
        time: [],
        pageNo:1,
        pageSize:20,
      },
      systemList:[],
      envList:[],
      serverList:[],
      phoneList:[],
    };
  },
  methods: {
    add() {},
    reset() {
      Object.keys(this.searchCondition).forEach(
        (key) => (this.searchCondition[key] = "")
      );
    },
    handle(type) {
      this.$emit("handle", type);
    },
    getDataList(){
        let params={
            name:'',
            pageNo:1,
            pageSize:99999,
        }
        systemFind(changeParam({ ...params })).then(res=>{
            if(res.success){
                this.systemList = res.result.list;
            }
        })
        let envParams={
            systemId:'',
            systemName:'',
            name:'',
            pageNo:1,
            pageSize:99999,
        }
        queryAlarmCellPhoneList().then(res=>{
            if(res.code == 200){
                this.phoneList = res.result;
            }
        })
        serviceData(changeParam({ ...envParams })).then(res=>{
            console.log(res,'rrrrrrr');
            if(res.success){
                this.serverList = res.result.list;
            }
        })
    },
  },
  created() {
    this.getDataList();
  },
};
</script>
<style lang="scss" scoped>
.search-header {
  .search {
    padding: 15px;
    padding-left: 0;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    .item {
      margin-right: 20px;
      // flex: 1;
      // display: flex;
      // align-items: center;
      span {
        font-size: 12px;
      }
    }
    .btn-area {
      display: flex;
      // width: 150px;
    }
  }
}
</style>
